	<template>
	<view>
		<!-- 客户筛选 -->
		<view class="screening-box">
			<!-- 客户分类筛选 -->
			<view class=""  @click="customCateMenu('show')">{{cateTitle}}<text class="icon-font arrow-xiala-font" >&#xe618;</text></view>
			
			<!-- 客户排序筛选-->
			<view @click="customSortMenu('show')" >{{sortTitle}}<text class="icon-font arrow-xiala-font" >&#xe618;</text></view>
			
			<!-- 客户经手人筛选 -->
			<view @click="customHandlerMenu('show')" v-show="limitViewOtherCustom">{{handlerTitle}}<text class="icon-font arrow-xiala-font" >&#xe618;</text></view>
			
			<!-- 客户其他赛选-->
			<view v-show="isHandlers" @click="customScreenMenu('show')">{{srceenTitle}}<text class="icon-font arrow-xiala-font" >&#xe618;</text></view>
		</view>
		
		<view class="Handlers-box" v-if="HandlersLs && HandlersLs.length > 0">
			<view class="item" v-for="(item,index) in HandlersLs" :key="index">
				{{item.title ? item.title : item.name ? item.name : ""}}<image src="../../static/images/close.png" @click="removeHandItem(item,index)"></image>
			</view>
			<view class="h-rest-txt" @click="onReset">重置</view>
		</view>

		<!-- 客户分类菜单 -->
		<view class="cate-mask" :style="'top: ' + topVal + 'px;' + (isExpand ? 'margin-left: 168px;' : '')"  
			:class="catecustomCate === 0 ? 'none' : catecustomCate === 1 ? 'show' : ''" 
			@click="customCateMenu">
			<view class="cate-content">
				<scroll-view scroll-y class="cate-list">
					<view v-for="item in cateList" :key="item.id">
						<view class="cate-item" 
							:class="{ active: item.id == cateId }" 
							@click="changeCustomCate(item)">{{ item.title }}</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<!-- 排序筛选菜单-->
		<view class="cate-mask" :style="'top: ' + topVal + 'px;' + (isExpand ? 'margin-left: 168px;' : '')"  
			:class="catecustomSort === 0 ? 'none' : catecustomSort === 1 ? 'show' : ''" 
			@click="customSortMenu">
			<view class="cate-content">
				<scroll-view scroll-y class="cate-list">
					<view v-for="item in customSortList" :key="item.id">
						<view class="cate-item" 
							:class="{ active: item.id == sortId }" 
							@click="changecustomSort(item)">{{ item.name }}</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<!-- 经手人筛选菜单-->
		<view class="cate-mask" :style="'top: ' + topVal + 'px;' + (isExpand ? 'margin-left: 168px;' : '')" 
			:class="catecustomHandler === 0 ? 'none' : catecustomHandler === 1 ? 'show' : ''" 
			@click="customHandlerMenu">
			<view class="cate-content">
				<view  class="cate-list comm-list">
					<view v-for="item in handlerList" :key="item.uid">
						<view class="cate-item" 
							:class="{ active: item.uid == handlerId }" 
							@click="changeUcpHandler(item)">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!--筛选 -->
		<view class="good-mask" :style="'top: 110px;'+ (isExpand ? 'margin-left: 240px;' : '')" 
			:class="catecustomScreen === 0 ? 'none' : catecustomScreen === 1 ? 'show' : ''">
			<view class="cat-content">
				<view class="scr-box comm-list">
					<view class="item">
						<view class="i-title"> {{filterZnTxt}} </view>
						<view class="items-box" >
							<view class="follow" v-for="(item,index) in mindLs" :key="index" :class="{'active' : item.id == group}"  @click="onFollowItems(item,index)" v-show="item.name">
								<view class="item-txt">{{item.name}}</view>
							</view>
						</view>
					</view>
					<view class="item" v-show="yunList && yunList.length > 0">
						<view class="i-title"> {{filterYdTxt}} </view>
						<view class="items-box" >
							<view class="items" 
								v-for="(items,idx) in yunList" 
								:key="idx" :class="{'active' : items.idyun == yunId}" 
								@click="onYunItems(items,idx)" 
								v-show="items.name">
									<view class="item-txt">{{items.name}}</view>
							</view>
						</view>
					</view>
					<view class="item" v-if="tagsList && tagsList.length > 0">
						<view class="i-title"> {{filterBqTxt}} </view>
						<view class="items-box" >
							<view class="items" v-for="(items,index1) in tagsList" :key="index1" :class="{'active' : items.id == tagId}" @click="onTagItems(items,index1)" v-show="items.title">
								<view class="item-txt">{{items.title}}</view>
							</view>
						</view>
					</view>
					<view class="item" v-if="provinceLs && provinceLs.length > 0">
						<view class="i-title"> {{filterSfTxt}} </view>
						<view class="items-box" >
							<view class="items" v-for="(items,indexs) in provinceLs" :key="indexs" :class="{'active' : items.code == curProvinceId}" @click="onProvince(items,indexs)" v-show="items.title">
								<view class="item-txt">{{items.title}}</view>
							</view>
						</view>
					</view>
					<view class="item" v-if="cityLs && cityLs.length > 0">
						<view class="i-title"> {{filterCsTxt}} </view>
						<view class="items-box" >
							<view class="items" v-for="(items,indexs) in cityLs" :key="indexs" :class="{'active' : items.code == curCityId}" @click="onCity(items,indexs)" v-show="items.title">
								<view class="item-txt">{{items.title}}</view>
							</view>
						</view>
					</view>
					<view class="item" v-if="areaLs && areaLs.length > 0">
						<view class="i-title"> {{filterQyTxt}} </view>
						<view class="items-box" >
							<view class="items" 
								v-for="(items,indexs) in areaLs" :key="indexs" 
								:class="{'active' : items.code == curAreaId}" 
								@click="onArea(items,indexs)"
								v-show="items.title">
								 <view class="item-txt">{{items.title}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="cat-btn-box" v-show="catecustomScreen == 1">
					<view class="cat-reset"  @click="onReset">{{reset}}</view>
					<view class="cat-comfirt"  @click="onSure">{{sureBtnTxt}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from "../../js/conf/Config.js";
	import lang from "../../js/conf/Lang.js";
	import customCtrl from "../../js/custom/CustomCtrl.js";
	import { mapGetters } from 'vuex';
	export default {
		computed: {
			...mapGetters(['isExpand'])
		},
		props:["topVal","limitViewOtherCustom",'md'],
		data() {
			return {
				isHandlers : false, //是否显示筛选
				
				// 分类筛选
				cateTitle:"类别",
				catecustomCate : 0,
				cateList : [],
				cateId:-1,
				//排序筛选
				sortTitle:"排序",
				catecustomSort : 0,
				customSortList : [],
				sortId : -1,
				// 经手人筛选
				handlerTitle:"经手人",
				catecustomHandler : 0,
				handlerList : [],
				handlerId:-1,
				// 筛选
				srceenTitle:"筛选",
				catecustomScreen : 0,
				
				mindLs : {},
				group:"",
				
				yunList:[],
				yunId:"",
				
				tagsList:[],
				tagId:"",
				
				provinceLs:[],
				curProvinceId:"",
				
				cityLs:[],
				curCityId:"",
				
				areaLs:[],
				curAreaId:"",
				
				filterZnTxt : lang.customerTxt.filterZnTxt,
				filterYdTxt : lang.customerTxt.filterYdTxt,
				filterBqTxt : lang.customerTxt.filterBqTxt, 
				filterSfTxt : lang.customerTxt.filterSfTxt, 
				filterCsTxt : lang.customerTxt.filterCsTxt,
				filterQyTxt : lang.customerTxt.filterQyTxt,
				reset : lang.reset,
				sureBtnTxt : lang.sureBtnTxt,
				HandlersLs : [],
			};
		},
		
		created() {
			this.createdUcpList();
		},
		
		methods: {
			/*****初始化数据****/
			initData(data)
			{
				if(data.isHandlers)
					this.isHandlers = data.isHandlers;
				if(data.cateList)
					this.cateList = data.cateList;
				if(data.customSortList)
				{
					this.customSortList = data.customSortList;
					this.sortId = data.customSortCheckId;
					console.log("客户排序选中=====：this.sortId===：",this.sortId );
				}
				if(data.mindLs)
					this.mindLs = data.mindLs;
				if(data.yunList)
					this.yunList = data.yunList;
				if(data.tagsList)
					this.tagsList = data.tagsList;
				if(data.provinceLs)
					this.provinceLs = data.provinceLs;
				if(data.cityLs)
					this.cityLs = data.cityLs;
				if(data.areaLs)
					this.areaLs = data.areaLs;
			},
			
			clearData()
			{
				this.group = "";
				this.yunId = "";
				this.tagId = "";
				this.curProvinceId = "";
				this.curCityId = "";
				this.curAreaId = "";
			},
			
			/*** 重置筛选 ***/
			onReset()
			{
				this.clearData();
				this.HandlersLs = [];
				this.onSure();
			},
			
			/****点击选好了****/
			onSure()
			{
				this.onClickPageHandler();
				console.log("this.group========================:",this.group);
				let data = {group:this.group,tagid:this.tagId,idyun:this.yunId,province:this.curProvinceId,city:this.curCityId,area:this.curAreaId,len:this.HandlersLs.length};
				this.$emit("groupYunTagProCityAreaFilter",data);
			},
			
			/*** 初始化经手人数据	UCP_LS  ***/
			async createdUcpList()
			{
				
				/*****
				使用场景ch取值：
				xs.销售模块：0-所有成员；1=开单场景；2=单据列表场景；3=新增客户场景；4=客户列表场景；5报表场景。
				cg.采购模块：0-所有成员；1=开单场景；2=单据列表场景；3=新增供应商场景；4=供应商列表场景；5报表场景；
				goods.产品模块：1=新增产品场景；2产品列表场景
				yy.预约：0-所有成员；1=开单场景；2=单据列表场景；3=新增客户场景；4=客户列表场景；5报表场景；
				*****/
				let url = config.UCP_LS;
				let param = {};
				param.md = 'xs'; //
				param.ch = 1; 
				this.handlerList = [];
				let res = await this.$api({url:url,data:param});
				if(res && res.status == 1)
				{
					if(!res.data)return;
					this.handlerList = [{uid:"",name:lang.ucpAllTxt}]
					this.handlerList = this.handlerList.concat(res.data);
					let len = res.data.length;
					let arr = []
					for(let i = 0; i<len; i++)
					{
						let obj = res.data[i];
						let temp = {};
						temp.title = obj.name; //兼容
						temp.id = obj.uid;//兼容
						arr.push(temp);
					}
					customCtrl.handlerList = arr;
				}
			},
			
			/*** 切换单据类型时  重置所有下拉 ***/
			resetFilters()
			{
				this.customSortMenu();
				this.customCateMenu();
				this.customHandlerMenu();
				this.customScreenMenu();
			},
			
			//显示分类面板
			customScreenMenu(type) 
			{	
				if(type == "show")
				{
					this.customSortMenu();
					this.customCateMenu();
					this.customHandlerMenu();
				}
				let timer = type === 'show' ? 10 : 200;
				let state = type === 'show' ? 1 : 0;
				this.catecustomScreen = 2;
				setTimeout(() => {
					this.catecustomScreen = state;
				}, timer);
			},
			/*** 打开经手人统计方式  --  结束 ***/
			
			/*** 打开时间统计方式  --  开始 ***/
			changecustomSort(item)
			{
				if(this.sortId == item.id) return;
				this.sortId = item.id;
				this.sortTitle = item.name;
				this.$emit("setSortId",item.id);
			},
			customSortMenu(type) 
			{	
				if(type == "show")
				{
					this.customCateMenu();
					this.customHandlerMenu();
					this.customScreenMenu();
				}
				let timer = type === 'show' ? 10 : 200;
				let state = type === 'show' ? 1 : 0;
				this.catecustomSort = 2;
				setTimeout(() => {
					this.catecustomSort = state;
				}, timer);
			},
			/*** 打开时间统计方式  --  结束 ***/
			
			/*** 筛选经手人  --  开始 ***/
			changeUcpHandler(item) 
			{
				if(this.handlerId == item.uid) return;
				this.handlerId = item.uid;
				this.handlerTitle = item.name;
				this.$emit("setUcpId",item.uid);
			},
			
			//显示分类面板
			customHandlerMenu(type) 
			{	
				if(type == "show")
				{
					this.customSortMenu();
					this.customCateMenu();
					this.customScreenMenu();
				}
				let timer = type === 'show' ? 10 : 200;
				let state = type === 'show' ? 1 : 0;
				this.catecustomHandler = 2;
				setTimeout(() => {
					this.catecustomHandler = state;
				}, timer);
			},
			/*** 打开门店统计方式  --  结束 ***/
			
			/*** 打开出库统计方式   --  开始  ***/
			changeCustomCate(item) 
			{
				if(this.cateId == item.id) return;
				this.cateTitle = item.title;
				this.cateId = item.id;
				this.$emit("setCustCate",item.id);
			},
			//显示分类面板
			customCateMenu(type) 
			{
				if(type == "show")
				{
					this.customSortMenu();
					this.customHandlerMenu();
					this.customScreenMenu();
				}
				let timer = type === 'show' ? 10 : 200;
				let state = type === 'show' ? 1 : 0;
				this.catecustomCate = 2;
				setTimeout(() => {
					this.catecustomCate = state;
				}, timer);
			},
			
			/*** 打开出库统计方式   --  结束  ***/
			onClickPageHandler()
			{
				if(this.catecustomCate == 1)
					this.customCateMenu();
				if(this.catecustomSort == 1)
					this.customSortMenu();
				if(this.catecustomHandler == 1)
					this.customHandlerMenu();
				if(this.catecustomScreen == 1)
					this.customScreenMenu();
			},
			
			/*** 筛选   点击关注item ***/
			onFollowItems(item,index)
			{
				if(this.group == item.id) return;
				this.group = item.id;
				item.type = 'zn';
				this.setHandlersData(item);
			},
			
			/*****点击云店筛选*****/
			onYunItems(item,index)
			{
				if(this.yunId == item.idyun)return;
				this.yunId = item.idyun;
				item.type = "yd";
				this.setHandlersData(item);
			},
			
			/****点击标签筛选****/
			onTagItems(item,index)
			{
				if(this.tagId == item.id)return;
				this.tagId = item.id;
				item.type = "bq";
				this.setHandlersData(item);
			},
			
			/***点击省份*****/
			onProvince(item,index)
			{
				if(this.curProvinceId == item.code)return;
				this.curProvinceId = item.code;
				item.type = "sf";
				this.setHandlersData(item);
			},
			
			/***点击城市*****/
			onCity(item,index)
			{
				if(this.curCityId == item.code)return;
				this.curCityId = item.code;
				item.type = "cs";
				this.setHandlersData(item);
			},
			
			/***点击省份*****/
			onArea(item,index)
			{
				if(this.curAreaId == item.code)return;
				this.curAreaId = item.code;
				item.type = "qy";
				this.setHandlersData(item);
			},
			
			/*** 设置  HandlersLs 数组一个类型只允许出现一次***/
			setHandlersData(item)
			{
				for(let i = 0; i < this.HandlersLs.length; i++)
				{
					if(this.HandlersLs[i].type == item.type)
					{
						this.HandlersLs.splice(i,1);
					}
				}
				this.HandlersLs.push(item);
			},
			
			/*** 点击删除 筛选的关注or品牌***/
			removeHandItem(item,index)
			{
				if(item.type == 'zn')
				{
					this.group = "";
				}
				if(item.type == 'yd')
				{
					this.yunId = "";
				}
				if(item.type == 'bq')
				{
					this. tagId = "";
				}
				if(item.type == 'sf')
				{
					this.curProvinceId = "";
				}
				if(item.type == 'cs')
				{
					this.curCityId = "";
				}
				if(item.type == 'qy')
				{
					this.curAreaId = "";
				}
				this.HandlersLs.splice(index,1);
				this.onSure();
			},
		}
	}
</script>

<style lang="scss">
.screening-box
{
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 0px 6px;
	height: 40px;
	background: #F3F3F2;
	// border-bottom: 1px solid #ECECEC;
	view
	{
		cursor: pointer;
		font-size: 14px;
		// max-width: 100px;
		overflow:hidden;
		white-space:nowrap;
		text-overflow:ellipsis;
		text
		{
			padding-left: 4px;
			font-size: 8px;
			color: #333;
		}
	}
	.divider
	{
		color: #ccc;
	}
}
.cate-mask
{
	margin-top: 20px;
	
}

.cate-list
{
	max-height: 480px;
	view
	{
		padding-left: 10px;
		line-height: 30px;
		font-size: 15px;
		cursor: pointer;
	}
	view:hover
	{
		background-color: #DDD;
	}
}
.active
{
	color: #007AFF;
}

.mask-top
{
	top: 110px;
}
.scr-box
{
	height: calc(100% - 20px);
	background: #FFF;
	padding: 10px;
	.item{
		.i-title
		{
			font-size: 16px;
			// font-weight: 700;
		}
		.items-box
		{
			display: flex;
			// justify-content: space-between;
			justify-content: space-evenly;
			flex-wrap: wrap;
			.follow
			{
				width: 49%;
				border-radius: 20px;
				height: 40px;
				background: #EEE;
				margin-bottom: 4px;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				.item-txt
				{
					width: calc(100% - 10px);
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-align: center;
				}
			}
			.follow:hover
			{
				background: #DDD;
			}
			.items
			{
				// width: 32%;
				width: 80px;
				padding-left: 10px;
				padding-right: 10px;
				border-radius: 20px;
				height: 40px;
				background: #EEE;
				margin-bottom: 4px;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				.item-txt
				{
					width: calc(100% - 10px);
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-align: center;
				}
			}
			.items:hover
			{
				background: #DDD
			}
			.active
			{
				background: #3388FF;
				color: #FFF;
			}
		}
	}
}

.Handlers-box
{
	padding: 3px 10px;
	height: 29px;
	display: flex;
	align-items: center;
	background-color: #F3F3F2;
	border-top: 1px solid #E3E3E2;
	.item
	{
		width: auto !important;
		margin-right: 15px;
		display: flex;
		align-items: center;
		image{
			cursor: pointer ;	
			margin-left: 2px;
			width: 12px;
			height: 12px;
		}
	}
	.h-rest-txt
	{
		color: #666;
		position: absolute;
		right: 5px;
		cursor: pointer;
	}
	.h-rest-txt:hover
	{
		color: #333;
	}
}
</style>